<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>  
</head>
<body>
  <!-- <div id="app">
      <ul>
          <li v-for="book in books">{{ book.name }}</li>
      </ul>
  </div> 
  <script>
  var app = new Vue({
      el: '#app',
      data: {
          books: [
              { name: '《Vue.js 实战》' },
              { name: '《Javascript 语言精粹》' },
              { name: '《Javascript 高级程序设计》' }
          ]
      }
  })
  </script>  -->

<!-- v-for的表达式支持一个可选参数作为当前项的索引 -->

<!-- <div id="app">
    <ul>
        <li v-for="(book, index) in books">{{ index }} - {{ book.name }}</li>
    </ul>
</div>
<script>
var app = new Vue({
    el: '#app',
    data: {
        books: [
             { name: '《Vue.js 实战》' },
             { name: '《Javascript 语言精粹》' },
             { name: '《Javascript 高级程序设计》' }
        ]
    }
})
</script> -->



<!-- 将多个元素进行渲染 -->

<!-- <div id="app">
    <ul>
        <template v-for="book in books">
            <li>书名: {{ book.name }}</li>
            <li>作者: {{ book.author }}</li>
        </template>
    </ul>
</div>
<script>
var app = new Vue({
    el: '#app',
    data: {
        books: [
            {
                name: '《Vue.js 实战》',
                author: '梁灏'
            },
            {
                name: '《Javascript 语言精粹》',
                author: 'Douglas Crockford'
            },
            {
                name: '《Javascript 高级程序设计》',
                author: 'Nicholas C.zakas'
            }
        ]
    }
})
</script> -->
<!-- 除了数组，对象的属性也可以遍历的 -->

<!-- <div id="app">
    <ul>
        <li v-for="(value, key, index) in user">
           {{ index }} - {{ key }}: {{value}}
        </li>
    </ul>
</div>
<script>
var app = new Vue({
    el: '#app',
    data: {
        user: {
            name: 'Aresn',
            gender: '男',
            age: 26
        }
    }
})
</script> -->

<!-- v-for还可以代整数 -->

<!-- <div id="app">
    <span v-for="n in 10">{{ n }} </span>
</div>
<script>
var app = new Vue({
    el: '#app'
}) -->


 <div id="app">
    <ul>
        <template v-for="book in books">
            <li>书名: {{ book.name }}</li>
            <li>作者: {{ book.author }}</li>
        </template>
    </ul>
</div>
<script>
var app = new Vue({
    el: '#app',
    data: {
        books: [
            {
                name: '《Vue.js 实战》',
                author: '梁灏'
            },
            {
                name: '《Javascript 语言精粹》',
                author: 'Douglas Crockford'
            },
            {
                name: '《Javascript 高级程序设计》',
                author: 'Nicholas C.zakas'
            }
        ]
    },
    computed: {
        filterBooks: function () {
            return this.books.filter(function (book) {
                return book.name.match(/Javascript/);

            });
        },
        computed: {
            filterBooks: function () {
                return this.books.sort
            }
        }
    }
});
// app.books.push({name: '(css揭秘)',author: '[希]Lea Verou'});

// app.books = app.books.filter(function (item) {
//     return item.name.match(/Javascript/);
// })
Vue.set(app.books, 3, {name:'《css揭秘》',author: '[希] Lea Verou'});
</script> 


</script>
</body>
</html>